<template>
  <el-table :data="props.likeListData" :show-header="false" @row-click="handleNodeClick">
    <el-table-column>
      <template #default="{ row }">
        <div class="file-name-warp">
          <svg class="flie-icon" aria-hidden="true" width="20" height="20">
            <use :xlink:href="getFileSvgIcon(row)" />
          </svg>
          <span class="file-name"> {{ row.fileName }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column width="180">
      <template #default="{ row }">
        {{ row.user_name }}
      </template>
    </el-table-column>
    <el-table-column width="180">
      <template #default="{ row }">
        {{ row.created_at }}
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

import { useRouter } from 'vue-router'
import { store } from '@/store/doc-center'
import { storeToRefs } from 'pinia'
import { IfileListData } from '../config/fileListData'

const docStore = store()
const { docListData } = storeToRefs(docStore)
const props = defineProps({
  likeListData: {
    type: Object,
    defluat: () => {}
  }
})

const fileTypeHash: { [key: string]: string } = {
  bmp: '#iconzhaopian1x',
  jpg: '#iconzhaopian1x',
  png: '#iconzhaopian1x',
  gif: '#iconzhaopian1x',
  jpeg: '#iconzhaopian1x',
  cdr: '#iconzhaopian1x',
  psd: '#iconzhaopian1x',
  doc: '#iconword1x',
  docx: '#iconword1x',
  pdf: '#iconpdf1x',
  ppt: '#iconppt1x',
  pptx: '#iconppt1x',
  xlsx: '#iconexcle1x',
  xls: '#iconexcle1x',
  txt: '#icontxt1x',
  mp3: '#iconyinle',
  wav: '#iconyinle',
  mp4: '#iconzhihuigongdi',
  webm: '#iconzhihuigongdi',
  ogg: '#iconzhihuigongdi',
  folder: '#iconwenjianjia1'
}

const getFileSvgIcon = (data: { filetype: string; filepath: string }) => {
  let last = null
  if (!data.filepath) {
    last = data.filetype
  } else {
    let arr = data.filepath.split('.')
    last = arr[arr.length - 1].toLocaleLowerCase()
  }
  return fileTypeHash[last] || '#iconother1x' // 为解决：找不到具有类型为 "string" 的参数的索引签名
}

/**
 * @desc: 查找是否存在该文件
 * @return {*}
 */
const findData = ref<IfileListData>()
const fileId = ref<number>()
const _findFIle = (item: IfileListData[]) => {
  for (let i = 0; i < item.length; i++) {
    if (item[i].id === fileId.value) {
      findData.value = item[i]
    }
    if (item[i].children_file && item[i].children_file.length) {
      _findFIle(item[i].children_file)
    }
  }
}

/**
 * @desc: 点击跳转到对应文件
 */
const $router = useRouter()
const handleNodeClick = (data: IfileListData) => {
  fileId.value = data.id
  _findFIle(docListData.value)
  if (!findData.value) {
    ElMessage('该文件不存在')
    return
  }
  $router.push({
    name: 'DocDetails',
    query: {
      file_id: data.id,
      parent_id: data.top_parent_id,
      is_like: 1
    },
    params: {
      fileName: data.fileName
    }
  })
}
</script>

<style lang="less" scoped>
.file-name-warp {
  display: flex;
  align-items: center;
  .file-name {
    margin-left: 10px;
    flex-grow: 1;
    width: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>
